Le but de ce chapitre est de présenter un autre type de layout : la carte à cases ( treemap en anglais).
On souhaite mettre en forme certains cours de Polytechnique et les grouper par génie (mathématique, informatique...). De plus on souhait rajouter des hyperliens pour arriver directement sur le site de chaque cours.
Toutes ces données se trouvent à cette adresse .

Il vous est demandé de faire le travail suivant :

  1. Mettre dans une variable treemap les données traitées par le layout (utiliser d3.hierarchy() et d3.treemap()).
  2. Utiliser cette variable pour créer une cellule par cours. Une cellule correspond en svg à un rectangle. Les cellules ayant un génie commun doivent avoir la même couleur.
    Si le layout a traité correctement les données, la position et la longueur/largeur de chaque cellule est définie dans les propriétés .x0, .y0, .x1 et .y1
  3. Ajouter le nom du cours de chaque cellule et le centrer et y associer un hyperlien qui redirige vers la description du cours sur le site de Polytechnique Montréal. Souligner l'hyperlien. Une URL est fournie dans le code.
    Remarque : Il est plus simple de créer un hyperlien ayant comme nom celui du cours plutôt que d'associer un hyperlien à un text